<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="姓名、手机号、微信号"
            v-model="params.realname"
            :style="{width: '280px'}"
            @clear="getList"
            clearable>
            <template #prepend>关键词</template>
          </el-input>
          <el-input
            style="width: 200px; margin-right: 10px"
            v-model="params.email"
            :style="{width: '240px'}"
            @clear="getList"
            clearable>
            <template #prepend>邮箱</template>
          </el-input>
          <el-button type="primary" @click="query">搜索</el-button>
        </div>
        <el-button-group>
          <el-button type="success" @click="batchSuccessful">批量通过</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table
      class="table-row-optimize"
      v-loading="state.loading"
      :data="state.tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="realname" label="姓名" width="85" align="center"/>
      <el-table-column prop="phone" label="手机号"/>
      <el-table-column prop="wechat" label="微信" width="160" align="center"/>
      <el-table-column prop="email" label="邮箱" width="160" align="center"/>
      <el-table-column prop="address" label="地址"/>
      <el-table-column label="状态" width="75" align="center">
        <template #default="scope">
          <span style="color: #66C548" v-if="scope.row.status === 20">已通过</span>
          <span style="color: #ff4d51" v-if="scope.row.status === 30">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180" align="center">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button-group>
            <el-button type="primary" @click="detail(scope.row.id)">查看</el-button>
            <el-button v-if="scope.row.status === 10" type="success" @click="batchSuccessful(scope.row.id)">通过
            </el-button>
            <el-button v-if="scope.row.status === 10" type="warning" @click="batchFail(scope.row.id)">拒绝</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>
</template>

<script setup>
import { toDateTime } from "../utils";
import { reactive } from "vue";
import { AdminMakerBatch, AdminMakerList } from "../api/server/maker/member";
import { ElMessage } from "element-plus";

const state = reactive({
  loading: false,
  tableData: [],
  total: 0,
  checkedIds: [],
})
const params = reactive({
  page: 1,
  limit: 10,
  realname: '',
  email: ''
})

onMounted(() => {
  getList()
})
const query = () => {
  getList()
}
const getList = async () => {
  state.loading = true
  const { data, total, current_page } = await AdminMakerList(params)
  state.loading = false
  state.tableData = data
  state.total = total
  params.page = current_page
}

const handleSelectionChange = row => {
  state.checkedIds = row
}

const batchSuccessful = async (id) => {
  console.info(id)
  let data = {}
  if (typeof id === 'number') {
    data = { id }
  } else {
    if (state.checkedIds.length === 0) {
      ElMessage.error('请选择列表数据')
      return false
    }

    let ids = state.checkedIds.map((d) => {
      if (d.status === 10) return d.id
    }).sort().filter(id => id);

    if (ids.length === 0) {
      ElMessage.error('所选择的不存在未审核的数据')
      return false
    }
    data = { id: ids.toString() }
  }

  const { code } = await AdminMakerBatch('successful', data)
  if (code === 200) {
    ElMessage.success('审核成功')
    await getList()
  }
  ElMessage.success('操作失败')
}

const batchFail = async (id) => {
  let data = {}
  if (typeof id === 'number') {
    data = { id }
  } else {
    if (state.checkedIds.length === 0) {
      ElMessage.error('请选择列表数据')
      return false
    }
    const ids = state.checkedIds.map((d) => {
      if (d.status === 20) return d.id
    }).sort().filter(id => id)

    if (ids.length === 0) {
      ElMessage.error('所选择的不存在未审核的数据')
      return false
    }
    data = { id: ids.toString() }
  }
  const { code } = await AdminMakerBatch('fail', data)
  if (code === 200) {
    ElMessage.success('审核成功')
    await getList()
    return false
  }
  ElMessage.success('操作失败')
}

const changePage = (val) => {
  params.page = val
  getList()
}

const detail = id => {

}
</script>

<style scoped>
.order-container {
  min-height: 100%;
}

.el-card.is-always-shadow {
  min-height: 100% !important;
}
</style>
